<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>


    <script>
        // ajax  是一个方法  可以发起请求 去请求服务端
        // 客户端 

        // 前后端交互
        let xhr = new XMLHttpRequest()   //创建ajax对象

        // xhr.open('请求方式(get/post/put/delete)','请求地址+接口地址')

        // 分情况写(不是必写)
        // xhr.setRequestHeader()//设置请求头
        // xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')
        // xhr.setRequestHeader('Content-type','application/json')
        // 这两行 设置发送数据的格式  常见于上面两者  默认第一种

        // xhr.setRequestHeader('header','xxxxxxxx')//在请求头上挂载 token
        // 取决于 当前请求的接口需不需要身份验证
        // token 身份令牌（一般是 后台系统居多 必须登录才能看的网页）

        // xhr.send('name=张三&age=22&sex=0')//发送数据 （post 才需要send 发送到 get 里面写空）
        // 对应 xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded')

        // xhr.send('[name:"张三",age:22,sex:0]')
        // 对应  xhr.setRequestHeader('Content-type','application/json')

        // 这是一个 当请求状态发生改变时 就会触发的一个事件
        // 分以下几个阶段// readyState
        // 0  请求未初始化
        // 1   服务器连接已经建立
        // 2   请求已接受
        // 3   请求处理中
        // 4   请求已完成  且响应已就绪

        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4) {
                // 数据存储在了 xhr.responseText 里面
            }
        }




        // 常见 状态码
        // 200 代表请求成功
        // 301 永久重定向
        // 302 临时重定向

        // 400 请求语法错误
        // 401 未授权访问
        // 403 禁止访问
        // 404 资源未找到

        // 500 服务端内部错误







    </script>
</body>

</html>